<!--  -->
<template>
	<Shape
		v-for="(item, index) in defaultSettingList"
		:key="item.groupWareCode"
		:comData="item"
		:active="item.defaultSetting.SFLOCK === '1' ? false : (item.groupWareCode === (curComponent ? curComponent.groupWareCode : ''))"
		:zIndex="index"
		:isDragZoom="item.defaultSetting.SFLOCK === '0'"
	>
		<div class="header_box">
			<div class="title_example">{{ item.defaultSetting.FXFFM }}</div>
			<div>
				<div @click.stop="clickLock($event, item)" class="lock_btn">{{item.defaultSetting.SFLOCK==='1'?"解锁":"锁死" }}</div>
			</div>
		</div>
		<!-- <Shape
			v-for="(ii,childIndex) in item.childrenData"
			:defaultStyle="ii.customStyle"
			:key="ii.name"
			:comData="ii"
			:parentComData="item"
			:active="ii.isDisable ? false : (ii.id === (curComponent ? curComponent.id : ''))"
			:zIndex="childIndex"
			:isDragZoom="item.childrenData.length===1?false:true"

		>
			<component
				:is="ii.name"
			></component>
		</Shape> -->
	</Shape>
</template>

<script>
import Shape from '@/components/Shape'
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			dataInfo:[]
		};
	},
	components: {
		Shape,
	},

	computed: {
		...mapState([
			'defaultSettingList',
			'curComponent',
		])
	},
	methods: {
		...mapMutations([
			'setCurComponent',
			'setDisableStyle'
		]),
		getShapeStyle(style) {
			const result = {};
			['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
				if (attr != 'rotate') {
					result[attr] = style[attr] + 'px'
				} else {
					result.transform = 'rotate(' + style[attr] + 'deg)'
				}
			})

			return result
		},
		clickLock(e, component) {

			e.stopPropagation()
			e.preventDefault()
			if (component.isDisable) {
				this.setCurComponent({ component })
				let style = {
					background: 'transparent',
					flag:false
				}
				this.setDisableStyle(style)
			} else {
				this.setCurComponent({ component })
				let style = {
					background: '#ccc',
					flag:true
				}
				this.setDisableStyle(style)
			}

		},
	}
}

</script>
<style lang='scss' scoped>
#editor {
	width: 100%;
	height: 100%;
	.custom_canvas {
		position: absolute;
		border: 1px solid rgb(204, 204, 204);
	}
}
.header_box {
	display: flex;
	align-items: center;
	height: 40px;
	background: #ccc;
	justify-content: space-between;
}
.lock_btn {
	color: #409eff;
	cursor: pointer;
}
</style>